<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        body {
            background-image: url("/imgs/reg.jpg");
            background-size: cover;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
<div id="app">
    <div style="text-align: center;width: 1800px">
        <h1 style="color: white;text-align: center;font-size: 50px;color: snow;">欢迎来到码头老鼠酒窖</h1>
        <br>
        <br>
    </div>
    <div style="text-align: center;width: 1800px;padding: 50px">
        <el-row :gutter="20">
            <el-col :span="12">
                <div class="block">
                    <el-carousel height="550px">
                        <el-carousel-item v-for="b in banner">
                            <img :src="b" alt="">
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </el-col>
            <el-col :span="12">
                <el-card style="height: 550px;background-color: rgba(255,255,255,0.7);">
                    <h3>注册</h3>
                    <img src="/random.jpg" style="position: absolute;left: 1137px;top: 318px" title="验证码" width="85"
                         height="50" alt="">
                    <el-form style="width: 400px;margin:70px auto;color: black" label-width="60px">
                        <el-form-item label="用户名" type="danger">
                            <el-input type="text" placeholder="请输入用户名"></el-input>
                        </el-form-item>
                        <el-form-item label="密码">
                            <el-input type="password" placeholder="请输入密码"></el-input>
                        </el-form-item>
                        <el-form-item label="昵称" type="danger">
                            <el-input type="text" placeholder="请输入昵称"></el-input>
                        </el-form-item>
                        <el-form-item label="验证码" type="danger">
                            <el-input type="text" v-model="chekCode" placeholder="请输入验证码(不区分大小写)"></el-input>
                        </el-form-item>
                        <a href="" style="text-decoration: none">忘记密码</a>
                        <el-form-item>

                            <el-button style="position: relative;background-color: saddlebrown;border: none;right: 30px"
                                       type="primary" @click="reg()">注册
                            </el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>
    </div>

</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {//在这里面定义变量
                banner: ["imgs/rb1.jpg", "imgs/rb2.jpg", "imgs/rb3.jpg"],
                random: "", chekCode: ""
            }
        },
        created: function () {
            axios.get("/random").then(function (response) {
                v.random = response.data;
            })
        },
        methods: {
            reg() {
                let a=v.chekCode
                let b=v.random
                if (a.toLowerCase()!=b.toLowerCase()) {
                    v.$message.error("验证码错误")
                    return
                }else {
                    v.$message.success("验证码正确")
                }
            }
        }
    })
</script>
</html>